@charset "UTF-8";
@import "../lib/animates.css";
/* 清除默认的外边距和内边距 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
img {
  margin: 0;
  padding: 0;
}
img,
input,
button,
textarea {
  border: none;
  padding: 0;
  margin: 0;
  outline-style: none;
}
ul,
ol {
  list-style: none;
  font-size: 12px;
}
input {
  font-family: "SimSun", "宋体";
}
select,
input,
textarea {
  font-size: 12px;
  margin: 0;
}
textarea {
  resize: none;
}
img {
  border: 0;
  /* 可以防止 img 下边出现缝隙问题 */
  vertical-align: middle;
}
body,
html {
  /* 将整个页面的字体, 默认重置 */
  font-size: 12px;
  color: #666;
  background: #fff;
  --themeColor: #fabbd8;
}
p,
span,
i {
  font-size: 12px;
}
a {
  color: #666;
  text-decoration: none;
  font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
}
/* 废物利用 1*/
s,
i,
em {
  font-style: normal;
  text-decoration: none;
}
div {
  font-size: 0;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.l50 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.t50 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.cen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.infinite {
  animation-iteration-count: infinite;
}
.h5_show .edit:hover {
  cursor: all-scroll;
  outline: 2px solid #1491fc;
}
@media screen and (min-width: 527px) {
  html,
  body {
    font-size: 52.7px !important;
  }
}
.container {
  height: 100vh;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  overflow: hidden;
  height: 100%;
}
.swiper-slide > div {
  width: 100%;
  height: 100%;
}
html,
body {
  color: #494949;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
}
.container {
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 10/16) and (min-width: 768px) {
  .container {
    width: 10rem;
    margin: 0 auto;
  }
}
@media (max-width: 319px) {
  html {
    widthrunning: 320px;
    overflow-x: auto;
  }
}
@media (max-height: 568px) {
  html {
    height: 568px;
    overflow-y: auto;
  }
}
@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.audio-box {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  width: 30px;
  height: 30px;
  background: url('../images/music.png') no-repeat center center;
  background-size: 100%;
  animation: spinner 2s linear infinite;
  animation-play-state: paused;
}
.box {
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.audio-box.play {
  animation-play-state: running;
}
.audio-box.play {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.swiper-slide-active .one {
  opacity: 1;
}
.swiper-slide-active .one .one-up {
  animation: blurred-bottom 2s 4.5s both;
}
.swiper-slide-active .one .one-up img {
  animation: pulse 3s 0s both;
  animation-iteration-count: infinite;
}
@-webkit-keyframes skew-tl2 {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
    transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 0;
  }
}
.swiper-slide-active .one .t-l {
  animation: skew-tl2 1s 0s both;
}
@-webkit-keyframes skew-br2 {
  0% {
    -webkit-transform: rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg);
    transform: rotateY(-35deg) rotateX(-20deg) translate(250px, 250px) skew(12deg, 15deg);
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 0;
  }
}
.swiper-slide-active .one .t-r {
  animation: skew-br2 1s 0s both;
}
@-webkit-keyframes bounce-bck2 {
  0% {
    -webkit-transform: scale(7);
    transform: scale(7);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 0;
  }
}
.swiper-slide-active .one .t1 {
  animation: bounce-bck2 1s 0.5s both;
}
.swiper-slide-active .one .t2 {
  animation: bounce-bck2 1s 1s both;
}
.swiper-slide-active .one .t3 {
  animation: bounce-bck2 1s 1.5s both;
}
.swiper-slide-active .one .all {
  animation: bounce-bck2 1s 2s both;
}
.swiper-slide-active .one .me {
  animation: bounce-bck2 1s 2.5s both;
}
.swiper-slide-active .one .baby {
  animation: rs-r2 0.8s 3s both;
}
.swiper-slide-active .one .to {
  animation: roll-top2 1s 3.2s both;
}
@keyframes bgShow {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.swiper-slide-active .one .one-bg,
.swiper-slide-active .one .bg-white {
  animation: bgShow 1s 4.2s both;
}
@keyframes showDon {
  0% {
    transform: scale(1);
    transform-origin: right bottom;
  }
  50% {
    transform: scale(1.2);
    transform-origin: right bottom;
  }
  100% {
    transform: scale(1);
    transform-origin: right bottom;
  }
}
.swiper-slide-active .one .one-fb {
  animation: bgShow 1s 4.2s both;
}
.swiper-slide-active .one .one-fb img {
  animation: showDon 20s 0s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .one .one-ft {
  animation: bgShow 1s 4.2s both;
}
.swiper-slide-active .one .one-ft img {
  animation: peoAni 30s 0s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .one .flower1 {
  animation: scale-center 1s 4.2s both;
}
.swiper-slide-active .one .flower1 img {
  animation: rotate-center 8s 0s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .one .flower2 {
  animation: scale-center 1s 4.2s both;
}
.swiper-slide-active .one .flower2 img {
  animation: rotate-center 6s 0s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .one .one {
  background: #000;
}
.swiper-slide-active .one .p1 {
  animation: rs-sr 1.2s 4.6s both;
}
.swiper-slide-active .one .p2 {
  animation: rs-r 1.2s 4.2s both;
}
.swiper-slide-active .one .one-icon {
  animation: scale-bl 1.4s 4.4s both;
}
.swiper-slide-active .one .one-icon2 {
  animation: scale-bl 1.2s 4.2s both;
}
.swiper-slide-active .one .one-icon2 img {
  animation: showDon 16s 0s both;
  animation-iteration-count: infinite;
}
@keyframes bgShowTwo {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.swiper-slide-active .two {
  opacity: 1;
  animation: bgShowTwo 1.5s 0s both;
}
.swiper-slide-active .two .two-tr {
  animation: spaceInRight 1s 0s both;
}
.swiper-slide-active .two .two-tr img {
  animation: pulse 6s 0s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .two .two-tl {
  animation: spaceInLeft 1.5s 0s both;
}
.swiper-slide-active .two .two-tl img {
  animation: pulse 4s 0s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .two .two-bot {
  animation: scale-bottom 1.5s 0.5s both;
}
.swiper-slide-active .two .two-p3 {
  animation: fadeInLeft 1.5s 1.5s both;
}
.swiper-slide-active .two .two-p4 {
  animation: fadeInRight 1.5s 1.8s both;
}
.swiper-slide-active .two .two-p1 {
  animation: fadeInUp 1.5s 2.8s both;
}
.swiper-slide-active .two .two-p2 {
  animation: flipInY 2s 2.5s both;
}
@keyframes bgShowFlower {
  0% {
    transform: scale(1.6) translateY(-8rem);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.swiper-slide-active .two .two-flower {
  animation: bgShowFlower 3.5s 1.5s both;
}
@keyframes Ticon1 {
  0% {
    transform: translate(-1rem, -1rem) rotate(45deg);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    transform: translate(10rem, 8rem) rotate(0deg);
    opacity: 1;
  }
}
.swiper-slide-active .two .icon1 {
  animation: Ticon1 10s 1.5s both;
  animation-iteration-count: infinite;
}
@keyframes Ticon2 {
  0% {
    transform: translate(-1rem, -2.5rem) rotate(180deg);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    transform: translate(1rem, 17.5rem) rotate(0deg);
    opacity: 1;
  }
}
.swiper-slide-active .two .icon2 {
  animation: Ticon2 10s 2s both;
  animation-iteration-count: infinite;
}
@keyframes Ticon3 {
  0% {
    transform: translate(-1rem, -1rem) rotate(180deg);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  100% {
    transform: translate(-8.8rem, 7rem) rotate(0deg);
    opacity: 1;
  }
}
.swiper-slide-active .two .icon3 {
  animation: Ticon3 10s 2.5s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .three {
  opacity: 1;
  animation: bgShowTwo 1s 0s both;
}
.swiper-slide-active .three .three-bg {
  animation: rs-sr 2s 0.5s both;
}
@-webkit-keyframes boingInUp2 {
  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-20deg);
  }
  50% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(20deg);
  }
  100% {
    opacity: 1;
    -webkit-transform-origin: 50% 0%;
    -webkit-transform: perspective(800px) rotateX(-20deg);
  }
}
.swiper-slide-active .three .three-top {
  animation: boingInUp2 2s 0.5s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .three .three-bot {
  animation: slide-bottom 1.5s 0.3s both;
}
.swiper-slide-active .three .three-p2 {
  animation: bounceInLeft 1.3s 1s both;
}
.swiper-slide-active .three .three-p1 {
  animation: bounceInRight 1.2s 1.3s both;
}
.swiper-slide-active .three .three-icon2 {
  animation: scale-bottom 1.2s 1.6s both;
}
.swiper-slide-active .three .three-p3 .peo-bottom {
  animation: rs-sr 1s 2s both;
}
.swiper-slide-active .three .three-p3 .tp {
  animation: flipInY 2s 2.4s both;
}
.swiper-slide-active .three .three-p4 {
  animation: boingInBottom 2s 2s both;
}
.swiper-slide-active .three .three-p4 .three-pt {
  animation: swing 10s 0s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .four {
  opacity: 1;
}
@keyframes bgShowFour {
  0% {
    transform: scale(1.8);
  }
  100% {
    transform: scale(1);
  }
}
.swiper-slide-active .four .bg1 {
  animation: bgShowFour 1.3s 0s both;
}
.swiper-slide-active .four .bg3 {
  animation: bgShowFour 1.3s 0.5s both;
}
.swiper-slide-active .four .bg2 {
  animation: bgShowFour 1.3s 0.9s both;
}
.swiper-slide-active .four .icon1 {
  animation: spaceInUp 2s 1s both;
}
@keyframes rotateImg {
  100% {
    transform: rotate(360deg);
  }
}
.swiper-slide-active .four .icon1 img {
  animation: spinner 10s linear infinite;
}
.swiper-slide-active .four .icon4 {
  animation: scale-bl 1.5s 1.5s both;
}
.swiper-slide-active .four .icon2 {
  animation: shake-show 1.5s 1.5s both;
}
.swiper-slide-active .four .p3 {
  animation: fadeInLeft 1.5s 2.3s both;
}
.swiper-slide-active .four .p2 {
  animation: scale-bottom 1.5s 2s both;
}
.swiper-slide-active .four .p4 {
  animation: perDown 1.5s 2.6s both;
}
.swiper-slide-active .four .p1 {
  animation: fadeInDown 1.6s 3s both;
}
.swiper-slide-active .four .icon5 {
  animation: roll-left 2s 2.5s both;
}
.swiper-slide-active .four .icon5 img {
  animation: vibrate-show 2s 2.5s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .four .love {
  animation: roll-right 2s 3s both;
}
.swiper-slide-active .four .love img {
  animation: shake-bottom 5s 2.5s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .four .icon3 {
  animation: fly-t 6s 2s both;
}
.swiper-slide-active .four .icon3 img {
  animation: peoAni 3s 2.5s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .six {
  opacity: 1;
}
.swiper-slide-active .six .six-r {
  animation: skew-l 2s 0.6s both;
}
.swiper-slide-active .six .six-l {
  animation: skew-r 3s 0s both;
}
.swiper-slide-active .six .six-cen {
  animation: rs-l 3s 0s both;
}
.swiper-slide-active .six .six-p4 {
  animation: scale-br 1.5s 2s both;
}
.swiper-slide-active .six .six-p4 .king {
  animation: swing 1.5s 2s both;
  animation-iteration-count: infinite;
}
.swiper-slide-active .six .six-p1 {
  animation: slide-bottom 1.2s 2.3s both;
}
.swiper-slide-active .six .six-p5 {
  animation: rotateInDownRight 1.2s 2.5s both;
}
.swiper-slide-active .six .six-p3 {
  animation: flipInY 1.2s 3s both;
}
.swiper-slide-active .six .six-p2 {
  animation: scale-bl 1.4s 3.2s both;
}
.swiper-slide-active .seven {
  opacity: 1;
  animation: bgShowTwo 1s 0s both;
}
.swiper-slide-active .seven .seven-box {
  animation: flip 1s 1s both;
}
.swiper-slide-active .seven .seven-box .text-box {
  height: 8rem  ;
  transition: all 2s 2.6s;
}
.swiper-slide-active .seven .seven-box .text-box p {
  opacity: 1;
  transition: all 1s 2.6s;
}
.swiper-slide-active .seven .seven-p1 {
  animation: blurred-bottom 1.5s 1.2s both;
}
.swiper-slide-active .seven .seven-p2 {
  animation: blurred-left 1.5s 1.2s both;
}
@-webkit-keyframes roll-bottom2 {
  0% {
    -webkit-transform: translateY(800px) rotate(540deg);
    transform: translateY(800px) rotate(540deg);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
}
@keyframes roll-top2 {
  0% {
    -webkit-transform: translateY(-800px) rotate(-540deg);
    transform: translateY(-800px) rotate(-540deg);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
}
@-webkit-keyframes rs-r2 {
  0% {
    -webkit-transform: translateZ(-200px) rotate(45deg) scale(0.8);
    transform: translateZ(-200px) rotate(45deg) scale(0.8);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotate(0) scale(1);
    transform: translateZ(0) rotate(0) scale(1);
    opacity: 0;
  }
}
.one {
  position: relative;
  opacity: 0;
  background: #fff;
  background-size: 100% 100%;
  overflow: hidden;
  background: #830000;
}
.one .one-up {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.7;
}
.one .one-up img {
  width: 0.7rem;
}
.one .one-up p {
  font-size: 0.4rem;
  font-weight: bold;
  margin-top: 0.3rem;
}
.one .one-icon {
  width: 4.5rem;
  position: absolute;
  top: 0rem;
  left: 0rem;
}
.one .one-icon img {
  width: 100%;
}
.one .one-icon2 {
  width: 4.7rem;
  position: absolute;
  bottom: -0.5rem;
  left: -0.3rem;
}
.one .one-icon2 img {
  width: 100%;
}
.one .one-bg {
  width: 100%;
  height: 100%;
}
.one .bg-white {
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.one h3 {
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
  font-family: "Georgia";
  text-align: center;
  width: 3rem;
  height: 4rem;
}
.one h2 {
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
  font-family: "Georgia";
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 3rem;
  height: 4rem;
}
.one .por {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.one .go {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
}
.one .go h2 {
  width: 3rem;
}
.one .all,
.one .me,
.one .to {
  height: 8rem;
}
.one .baby {
  height: 12rem;
}
.one .peo-box {
  width: 60%;
  position: absolute;
  bottom: 0rem;
  right: 0;
  left: 0;
  margin: auto;
  height: 12rem;
}
.one .peo-box .p1 {
  width: 108%;
  position: absolute;
  right: -1rem;
  bottom: 3rem;
}
.one .peo-box .p2 {
  width: 101%;
  position: absolute;
  left: -1rem;
  bottom: 2rem;
  transform: rotate(5deg);
}
.one .peo-box .flower1 {
  width: 2.3rem;
  position: absolute;
  left: -1rem;
  bottom: 4rem;
}
.one .peo-box .flower1 img {
  width: 100%;
}
.one .peo-box .flower2 {
  width: 1.8rem;
  position: absolute;
  left: 1rem;
  top: 0;
}
.one .peo-box .flower2 img {
  width: 100%;
}
.one .one-fb {
  position: absolute;
  right: 0rem;
  bottom: 0rem;
  width: 5.7rem;
}
.one .one-fb img {
  width: 100%;
}
.one .one-ft {
  width: 6.5rem;
  position: absolute;
  right: 0.1rem;
  top: 0rem;
}
.one .one-ft img {
  width: 100%;
}
p {
  font-size: 30rem/750 / 10;
  line-height: 62rem/750 / 10;
  letter-spacing: 0rem/750 / 10;
  color: #fff;
}
.two,
.three,
.four,
.six {
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.two {
  background: url('../images/two.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.two .two-tl {
  position: absolute;
  top: 3rem;
  left: -1rem;
  width: 8rem;
}
.two .two-tl img {
  width: 100%;
}
.two .two-tr {
  position: absolute;
  top: 1rem;
  right: 0rem;
  width: 7rem;
}
.two .two-tr img {
  width: 100%;
}
.two .two-bot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.two .two-flower {
  position: absolute;
  width: 100%;
  top: 1rem;
  left: 0rem;
  z-index: 1;
}
.two .two-p1 {
  position: absolute;
  bottom: 8rem;
  left: 1rem;
  width: 2.8rem;
}
.two .two-p2 {
  position: absolute;
  bottom: 9rem;
  right: 0;
  width: 2.7rem;
  z-index: 1;
}
.two .two-p3 {
  position: absolute;
  bottom: 0;
  left: 0rem;
  width: 7rem;
  z-index: 1;
}
.two .two-p4 {
  position: absolute;
  bottom: 0;
  right: -0.7rem;
  width: 6rem;
  z-index: 2;
}
.two .icon1 {
  width: 5rem;
  position: absolute;
  top: 0;
  left: 0;
}
.two .icon2 {
  width: 3rem;
  position: absolute;
  top: 0;
  left: 4rem;
}
.two .icon3 {
  width: 1rem;
  position: absolute;
  top: 0;
  right: 1rem;
}
.three {
  position: relative;
  background: url('../images/three.png') no-repeat;
  background-size: 100% 100%;
}
.three .three-bot {
  width: 100%;
  position: absolute;
  bottom: -2rem;
  left: 0;
}
.three .three-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 8rem;
}
.three .three-bg {
  position: absolute;
  top: 3rem;
  right: 0;
  width: 100%;
}
.three .three-p1 {
  position: absolute;
  bottom: 0;
  right: -1rem;
  width: 8rem;
  z-index: 3;
}
.three .three-p2 {
  position: absolute;
  bottom: 0;
  left: 0rem;
  width: 5rem;
  z-index: 2;
}
.three .three-p4 {
  position: absolute;
  top: 2rem;
  right: -0.4rem;
  width: 6rem;
  z-index: 2;
}
.three .three-p4 .p4 {
  width: 100%;
}
.three .three-p4 .three-pt {
  position: absolute;
  top: -1.5rem;
  left: 1.5rem;
  width: 2.3rem;
}
.three .three-p3 {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 7rem;
}
.three .three-p3 img {
  width: 100%;
}
.three .three-p3 .peo-bottom {
  margin-top: -0.3rem;
}
.three .three-icon2 {
  position: absolute;
  bottom: 4.7rem;
  left: 2.3rem;
  width: 3rem;
  z-index: 1;
}
.four {
  position: relative;
}
.four .bg1,
.four .bg3,
.four .bg2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.four .bg3 {
  z-index: 2;
}
.four .icon1 {
  width: 5rem;
  z-index: 1;
  position: absolute;
  top: -0.5rem;
  left: 0rem;
}
.four .icon1 img {
  width: 100%;
}
.four .icon2 {
  width: 2rem;
  z-index: 1;
  position: absolute;
  top: 2.5rem;
  right: 1rem;
}
.four .icon4 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4rem;
  z-index: 2;
}
.four .icon3 {
  position: absolute;
  left: 6rem;
  bottom: 4rem;
  width: 2rem;
  z-index: 4;
}
.four .icon3 img {
  width: 100%;
}
.four .icon5 {
  position: absolute;
  right: 3.8rem;
  bottom: 11rem;
  width: 2rem;
  z-index: 2;
}
.four .icon5 img {
  width: 100%;
}
.four .p1 {
  position: absolute;
  left: 2.5rem;
  top: 1rem;
  width: 6rem;
  z-index: 1;
}
.four .p1 .peo-1 {
  width: 100%;
}
.four .p1 .four6 {
  width: 100%;
  margin-top: -1rem;
}
.four .p2 {
  position: absolute;
  right: 0.3rem;
  bottom: 0rem;
  width: 7.7rem;
  z-index: 1;
}
.four .p3 {
  position: absolute;
  left: -0.8rem;
  bottom: 1.3rem;
  width: 6.5rem;
  z-index: 1;
}
.four .p4 {
  position: absolute;
  right: -0.4rem;
  bottom: 0rem;
  width: 3.4rem;
  z-index: 2;
}
.four .love {
  position: absolute;
  left: 1.2rem;
  top: 5rem;
  width: 3.4rem;
  z-index: 2;
}
.four .love img {
  width: 100%;
}
.six {
  position: relative;
  background: url('../images/six-bg.png') no-repeat;
  background-size: 100% 100%;
}
.six .six-r {
  position: absolute;
  right: 6.2rem;
  top: 8rem;
  width: 5.4rem;
}
.six .six-l {
  position: absolute;
  left: 6rem;
  top: 2rem;
  width: 9.4rem;
}
.six .six-cen {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  width: 9.4rem;
}
.six .six-icon {
  position: absolute;
  left: 0rem;
  bottom: -8rem;
  width: 11.4rem;
}
.six .six-p1 {
  position: absolute;
  left: -1rem;
  bottom: 0rem;
  width: 6.4rem;
}
.six .six-p2 {
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  width: 4.4rem;
}
.six .six-p3 {
  position: absolute;
  left: 0rem;
  bottom: 6rem;
  width: 5.4rem;
}
.six .six-p4 {
  position: absolute;
  right: -1rem;
  bottom: 0rem;
  width: 5.4rem;
  z-index: 1;
}
.six .six-p4 .sp4 {
  width: 100%;
}
.six .six-p4 .king {
  width: 5rem;
  position: absolute;
  top: -2.4rem;
  right: 0.2rem;
}
.six .six-p5 {
  position: absolute;
  right: -1rem;
  bottom: 7rem;
  width: 4.5rem;
}
.seven {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../images/seven-bg.png') no-repeat;
  background-size: 100% 100%;
}
.seven .seven-box {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.seven .seven-box img {
  width: 100%;
}
.seven .seven-box .text-box {
  width: 80%;
  height: 0.5rem;
  background: #fff;
  margin-bottom: -0.7rem;
  z-index: 1;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  padding: 0.5rem;
  box-sizing: border-box;
}
.seven .seven-box .text-box p {
  color: #000;
  text-indent: 2em;
  font-family: 'kaiti';
  font-size: 0.5rem;
  line-height: 0.7rem;
  opacity: 0;
}
.seven .seven-p1 {
  position: absolute;
  right: -0.3rem;
  bottom: 0rem;
  width: 3.5rem;
}
.seven .seven-p2 {
  position: absolute;
  left: -0.3rem;
  bottom: 0rem;
  width: 4.8rem;
}
